<template>
  <div>
    <div class="banner" @click="show = true">
      <img class="banner-img" :src="detailList.bannerImg" />
      <div class="banner-info">
        <div class="banner-tittle">
          {{ detailList.sightName }}
        </div>
        <div class="banner-number">
          <span class="iconfont icon-tupian"></span>
        </div>
      </div>
    </div>
    <Fade>
    <Gallary :gallaryImgs="gallaryImgs" v-show="show" @close="show = false" />
    </Fade>
  </div>
</template>

<script>
export default {
  name: 'TravelBanner',
  props: {
    gallaryImgs: Array,
    detailList: Object
  },
  data() {
    return {
      show: false
    }
  },

  mounted() {},

  methods: {
    handle() {
      this.show = true
    }
  }
}
</script>

<style lang="less" scoped>
.banner {
  position: relative;
  img {
    width: 100%;
  }
  .banner-info {
    display: flex;
    background-image: linear-gradient(
      to top,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0.5)
    );

    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    line-height: 0.6rem;
    color: #fff;

    .banner-tittle {
      flex: 1;
      font-size: 0.32rem;
      padding: 0 0.2rem;
    }
    .banner-number {
      padding: 0 0.4rem;
      border-radius: 0.2rem;
      background: rgba(0, 0, 0, 0.8);
      font-size: 0.24rem;
    }
    .icon-tupian {
      font-size: 0.3rem;
    }
  }
}
</style>
